<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<slot>基础的默认内容来自slot</slot>
		
		<h1>props中的count {{ count }}</h1>
		<button @click="handler">子组件的数据传递给父组件</button>
		<slot name="footer" :childCount="childCount" >基础的默认内容来自slot(footer)</slot>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		//组件通信
		//1、父传子，通过props
		//2、子组件的数据传递给父组件（需要自定义事件），通过$emit
		//3、vuex
		props: {
			msg: String,
			count: {
				type: [String, Number],
				default: 100,
				required: false
			}
		},
		methods: {
			handler() {
				this.childCount++;
				this.$emit('child-count-change', this.childCount) //触发自定义事件
			}
		},
		data() {
			return {
				childCount: 0
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello {
		background-color: red;
	}

	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
